<template>
  <div id="MainBody" style="width: 100%; text-align:center;">
    <div style="width:100%;">
      <MainCarousel style="display:inline-block; width: 80%;" :carousel-list="carouselList">
      </MainCarousel>
    </div>
    <div style="text-align: center">
      <MainCourses :course-list="courseList" :loading="loading"></MainCourses>
    </div>
  </div>
</template>

<script>
import MainCarousel from './MainBody/MainCarousel.vue'
import MainCourses from './MainBody/MainCourses.vue'
export default {
  components: { MainCarousel, MainCourses },
  // data() {
  //   return {
  //     courseList: [
  //       { id: '001', imageURL: 'https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large', title: 'html教学', views: 1000, like: 20},
  //       { id: '002', imageURL: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', title: 'css教学', views: 1000, like: 20 },
  //       { id: '003', imageURL: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', title: 'javascript教学', views: 1000, like: 20 },
  //       { id: '004', imageURL: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', title: 'axios教学', views: 1000, like: 20 },
  //       { id: '005', imageURL: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', title: 'typescript教学', views: 1000, like: 20 },
  //       { id: '006', imageURL: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png', title: 'vue教学', views: 1000, like: 20 },
  //       { id: '007', imageURL: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', title: 'react教学', views: 1000, like: 20 },
  //       { id: '008', imageURL: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png', title: 'html教学', views: 1000, like: 20 },
  //     ]
  //   }
  // },
  props: {
    courseList: [],
    carouselList: [],
    loading: Boolean,
  },
}
</script>

<style scoped>
#MainBody {
  height: 100%;
  margin-top: 30px;
  width: 100%;
}
</style>